<template>
	<view class="content">
		<view class="head-search">
			<input class="head-search-input" type="text" placeholder="小程序定制" />
		</view>
		<view class="category-body">
			<view class="category-body-left">
				<scroll-view scroll-y class="category-body-left-scroll">
					<view class="category-body-left-item category-body-left-current">教育管理系统</view>
					<view class="category-body-left-item">微信小程序</view>
					<view class="category-body-left-item">高防服务器</view>
					<view class="category-body-left-item">区块链方案</view>

				</scroll-view>
			</view>
			<view class="category-body-right">
				<view>
					<scroll-view scroll-y class="category-body-right-item">
						<view class="category-body-right-content clearfix">
							<navigator url="../commodity/detail">
								<view class="commodity-row-2">
									<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
									<view class="commodity-item-title">培训教育系统</view>
									<view class="commodity-item-price">
										<text class="preferential-price">¥3000</text>
										<text class="original-price">¥6000</text>
									</view>
								</view>
							</navigator>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style>
	.head-search {
		height: 100upx;
		background: #fff;
		padding: 20upx;
		box-sizing: border-box;
		position: relative;
	}

	.head-search:after {
		content: '';
		display: block;
		height: 2upx;
		left: 0;
		right: 0;
		transform: scaleY(.5);
		position: absolute;
		bottom: 0;
		background: #ddd;
	}

	.head-search-input {
		border-radius: 60upx;
		height: 60upx;
		line-height: 60upx;
		background: #f2f2f2;
		padding: 0 30upx;
		font-size: 28upx;

	}

	.head-search-input div div {
		line-height: 60upx;
	}

	.category-body {
		position: absolute;
		top: 100upx;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.category-body-left {
		position: absolute;
		left: 0;
		width: 200upx;
		top: 0;
		bottom: 0;
		background: #fbfbfb;
	}

	.category-body-left-item {
		height: 102upx;
		line-height: 100upx;
		box-sizing: border-box;
		background: #f2f2f2;
		border-bottom: 2upx solid #fbfbfb;
		text-align: center;
		font-size: 26upx;
	}

	.category-body-left-current {
		background: #fff;
	}

	.category-body-right {
		left: 200upx;
		top: 0;
		bottom: 0;
		right: 0;
		position: absolute
	}

	.category-body-right-item,
	.category-body-left-scroll {
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		position: absolute
	}

	.commodity-row-2 {
		width: calc((100% - 20upx) / 2);
		float: left;
		margin-right: 20upx;
		margin-bottom: 30upx;
	}

	.commodity-row-2:nth-child(2n+2) {
		margin-right: 0;
	}

	.commodity-row-2 image {
		width: 245upx;
		height: 245upx;
		display: block;
	}

	.commodity-item-title {
		height: 64upx;
		line-height: 64upx;
		font-size: 26upx;
		color: #666;
	}

	.commodity-item-price {
		height: 30upx;
		line-height: 30upx;
		font-size: 32upx;
		color: #f00;
	}

	.original-price {
		font-size: 24upx;
		padding-left: 6upx;
		color: #aaa;
		text-decoration: line-through;
	}

	.category-body-right-content {
		position: relative;
		padding: 20upx;
	}
</style>
